<template>
    <div class="container">
        <div class="common-layout">
            <el-container>
                <el-aside width="200px">
                    <div class="top-image">
                        <img src="../../../public/left-logo.png" alt="">
                    </div>
                    <div class="menulist"> 
                        <div class="list-item" :class="[num===1?'active':'']" @click="goDetail(1)">
                            <div class="list-icon">
                                <el-icon :color="num===1?'#fff':'#747474'"><UploadFilled /></el-icon>
                            </div>
                            <div class="list-title">视频上传</div>
                        </div>
                        <div class="list-item" :class="[num===2?'active':'']" @click="goDetail(2)">
                            <div class="list-icon">
                                <el-icon :color="num===2?'#fff':'#747474'"><List /></el-icon>
                            </div>
                            <div class="list-title">课时管理</div>
                        </div>
                        <div class="list-item" :class="[num===3?'active':'']" @click="goDetail(3)">
                            <div class="list-icon">
                                <el-icon :color="num===3?'#fff':'#747474'"><HelpFilled/></el-icon>
                            </div>
                            <div class="list-title">视频转码</div>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script setup>
import {  HelpFilled,UploadFilled,List} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();
/**
 * 跳转到详情页的方法
 */
let num = ref(1); //默认上传页面
const goDetail = (index) => {
    switch (index) { 
        case 1:
            router.push({ path: "/videoUpload" });
            break;
        case 2:
            router.push({ path: "/course" });
            break;
        case 3:
            router.push({ path: "/videoTranscoding" });
        break;    
    }
   num.value = index;
};
router.push({ path: "/videoUpload" });//默认上传页面
</script>

<style scoped lang="scss">
.common-layout {
    .el-aside {
        background-color: #ffffff;
        height: 100vh;
        box-sizing: border-box;
    }
    .el-main {
        padding: 0px;
     }
    .top-image {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #CDD0D6;
    }
    .active{
            background-color: #67c23a;
            color: #fff;
         }
    .list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        cursor: pointer;
         .list-icon {
             margin-right: 10px;
         }
         
    }
}
</style>